<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title></title>
		<link rel="stylesheet" href="Boostrap/css/bootstrap.min.css" />
	</head>
	<style>
		@media screen and (min-width:576px) and (max-width:768px) {
			.card-columns {
				-webkit-column-count: 2;
				-moz-column-count: 2;
				column-count: 2;
			}
		}
	</style>
	<body>
		<div class="container-fluid">
			<!--眉首导航nav-->
			<nav class="navbar navbar-dark bg-info navbar-expand-lg">
				<!--导航栏-->
				<a class="navbar-brand" href="#">LOGO</a>
				<!--三条杠图标，切换器-->
				<button class="navbar-toggler" data-toggle="collapse" data-target="#navCollapse">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navCollapse">
					<!--导航无序列表ul-->
					<ul class="navbar-nav mr-auto">
						<li class="nav-item"><a class="nav-link" href="/index.html">首页</a></li>
						<!--下拉菜单-->
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" data-toggle="dropdown"
								href="#">选择线路</a>
							<!--二级下拉菜单-->
							<div class="dropdown-menu">
								<a href="/line.html?region=0" class="dropdown-item">国内</a>
								<a href="/line.html?region=1" class="dropdown-item">国际</a>
							</div>
						</li>
						<li class="nav-item"><a id="contactLink" data-placement="bottom" data-html="true" data-trigger="hover" data-content="<img src='Boostrap/img/qrcode.png'>" class="nav-link" href="/tourSite/contact.html">联系我们</a></li>
					</ul>
					<!--内置表单form-->
					<form class="form-inline">
						<input type="text" class="form-control mr-2" placeholder="站内搜索" />
						<button class="btn btn-outline-light">搜索</button>
					</form>
				</div>
			</nav>
			<!--轮播器-->
			<div class="jumbotron-fluid pb-3" >
				<h1>地球没修猫不会转！</h1>
				<p class="text-secondary">介绍可爱的修猫咪——</p>
				<div class="carousel" data-ride="carousel" id="wrapper">
					<ol class="carousel-indicators">
						<li data-target="#wrapper" data-slide-to="0"></li>
						<li data-target="#wrapper" data-slide-to="1"></li>
						<li data-target="#wrapper" data-slide-to="2"></li>
					</ol>
					<div class="carousel-inner">
						<div class="carousel-item" data-interval="2000">
							<img class="img-fluid" src="Boostrap/img/Dping1.jpg" alt="">
						</div>
						<div class="carousel-item active">
							<img class="img-fluid" src="Boostrap/img/Dping2.jpg" alt="">
						</div>
						<div class="carousel-item">
							<img class="img-fluid" src="Boostrap/img/Dping3.jpg" alt="">
						</div>
						<a href="#wrapper" class="carousel-control-prev" data-slide="prev">
							<span class="carousel-control-prev-icon"></span>
						</a>
						<a href="#wrapper" class="carousel-control-next" data-slide="next">
							<span class="carousel-control-next-icon"></span>
						</a>
					</div>
					<h5><a href="">更多……</a></h5>
				</div>
				<!--价格-->
				<div class="shadow">
					<h5 class="text-success border-bottom border-success">头牌小猫</h5>
					<div class="row pb-5">
						<div class="col-lg-6">
							<div class="media position-relative">
								<img style="width: 11rem;" class="img-thumbnail" src="Boostrap/img/JG1.jpg" alt="">
								<div class="media-body">
									<h3 class="mt-0 mb-1">秀气小猫银渐层</h3>
									<p>银渐层</p>
									<p>英短银渐层是由英国短毛猫（蓝灰色）与金吉拉繁育而出的英短品种，由于具备了金吉拉猫白色的毛色，又具备了英国短毛猫重要的特征。</p>
									<p>底层绒毛是纯白色。背部、两肋、头部和尾巴上的被毛的毛尖被充分地染成烟色，外观呈现出闪烁的银色的特征。四肢上有轻微的毛尖染色阴影。</p>
									<a class="stretched-link" href="">查看详情</a>
								</div>
							</div>
						</div>
						<div class="col-lg-6">
							<div class="media position-relative">
								<div class="media-body">
									<h3 class="mt-0 mb-1">多多bb英短蓝白</h3>
									<p>英短蓝白</p>
									<p>性格乖巧粘人不调皮。与纯色不同，双色猫在原有品种的基础上更聪明。一般来说，英短都是粘人的，当然也有一些不粘人的。每只猫都有不同的性格。</p>
									<p>英国短毛猫大胆好奇，但非常温柔，适应性强。不会因为环境的改变而改变，也不会发脾气，不会发出任何声音。</p>
									<a class="stretched-link" href="/line detail.html">查看详情</a>
								</div>
								<img style="width: 12rem;" class="img-thumbnail" src="Boostrap/img/JG2.png" alt="">
							</div>
						</div>
					</div>
				</div>
				<div class="shadow">
					<h5 class="text-warning border-bottom border-warning">热门猫猫~</h5>
					<div class="card-columns">
				<!--瀑布-->
						<div class="card">
							<img src="Boostrap/img/pubu1.jpg" alt="" class="card-img-top">
							<div class="card-body">
								<h5 class="card-title">加菲猫</h5>
								<h6 class="card-subtitle">快乐生活加菲猫</h6>
								<p class="card-text">加菲猫除拥有浓密皮毛外，还保留了波斯猫独特的可爱表情与圆滚滚的体型。性格也如波斯猫般文静、亲切，能慰藉主人的心，体形为中型到大型的短脚型，头部宽而圆，鼻子有明显的凹陷，皮毛有柔和的光泽，性情独立，不爱吵闹。</p>
								<a href="" class="card-link">查看详情</a>
							</div>
						</div>
						<div class="card">
							<img src="Boostrap/img/pubu2.jpg" alt="" class="card-img-top">
							<div class="card-body">
								<h5 class="card-title">英国短毛猫</h5>
								<h6 class="card-subtitle text-secondary">憨憨猫猫小英短</h6>
								<p class="card-text">英国短毛猫体形圆胖，外型有中型至大型。其骨架及肌肉很发达，短而肥的颈与及阔而平的肩膊相配合。头部圆而阔，体粗短发达，被毛短而密，头大脸圆，大而圆的眼睛根据被毛不同而呈现各种颜色。</p>
								<a href="" class="card-link">查看详情</a>
							</div>
						</div>
						<div class="card">
							<img src="Boostrap/img/pubu3.jpg" alt="" class="card-img-top">
							<div class="card-body">
								<h5 class="card-title">缅因猫</h5>
								<h6 class="card-subtitle">"温柔的巨人"缅因</h6>
								<p class="card-text">缅因猫看起来雍容华贵、霸气外露，有狮子一样的王者风范，浑身透着霸道总裁范儿。全身浓密顺滑的被毛，再配上它略显稳重严肃的面目表情，显示出不同寻常。它的尾巴又大又长，像柔软的拂尘，潇洒的气质颇具一番野性美。</p>
								<a href="" class="card-link">查看详情</a>
							</div>
						</div>
						<div class="card">
							<img src="Boostrap/img/pubu4.jpg" alt="" class="card-img-top">
							<div class="card-body">
								<h5 class="card-title">布偶猫</h5>
								<h6 class="card-subtitle">猫中贵族小布偶</h6>
								<p class="card-text">布偶猫全身非常松弛，像软绵绵的布偶一样。它性格温顺、恬静，对人非常友善，对疼痛的忍受性相当强，常被误认为缺乏疼痛感。它非常能容忍孩子的玩耍，也因此被称为布偶猫，是非常理想的家养宠物。</p>
								<a href="" class="card-link">查看详情</a>
							</div>
						</div>
						<div class="card">
							<img src="Boostrap/img/pubu5.jpg" alt="" class="card-img-top">
							<div class="card-body">
								<h5 class="card-title">暹罗猫</h5>
								<h6 class="card-subtitle">聪明好动小暹罗</h6>
								<p class="card-text">暹（xiān）罗猫是世界著名的短毛猫，也是短毛猫的代表品种。种族原产于暹罗（今泰国），故名暹罗猫。在200多年前，这种珍贵的猫仅在泰国的皇宫和大寺院中饲养，是足不出户的贵族。暹罗猫能够较好适应主人当地的气候，且性格刚烈好动，机智灵活，好奇心特强，善解人意。</p>
								<a href="" class="card-link">查看详情</a>
							</div>
						</div>
					</div>
				</div>
				<!--页脚-->
				<footer class="text-right">
					<p>xxxx公安局</p>
					<p>审批xxxxxx号</p>
				</footer>
			</div>
	</body>
</html>
<script src="Boostrap/js/jquery-3.6.0.min.js"></script>
<script src="Boostrap/js/bootstrap.bundle.min.js"></script>
<script src="Boostrap/js/tourSite.menu.js"></script>